<template>
  <view class="mySearch">
    <!-- 搜索组件 -->
    <uni-search-bar @input="input"></uni-search-bar>
    <!-- 搜索建议列表 -->
    <view class="advanceList" v-if="searchResult.length!==0&&key.length!==0">
      <view @click="gotoDetail(item)" class="searchAdvance" v-for="(item,i) in searchResult" :key="item.goods_id">
        <view class="left">{{item.goods_name}}</view>
        <uni-icons class="right" type="forward" size="18"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="historyBox" v-else>
      <!-- 标题区域 -->
      <view class="historyTitle">
        <text>搜索历史</text>
        <uni-icons @click="clearHistory" class="right" type="trash-filled" size="20"></uni-icons>
      </view>
      <!--列表区域-->
      <view class="historyList">
        <uni-tag :text="item" v-for="(item,i) in historyResult" :key="i" @click="goGoodSList(item)"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
    this.historyResult= JSON.parse(uni.getStorageSync('searchHistory')||'[]')
    },
    data() {
      return {
        key: '',
        time: null, //防抖
        searchResult: [], //搜索建议结果
      historyResult: ['apple'] //搜索历史
      };
    },
    methods: {
      input(e) {
        if (this.timer) clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          // console.log(e);
          this.key = e
          if (this.key.trim() !== '') {
            this.getsearchResult()
          }
        }, 1000)
      },
      // 根据搜索关键字展示联想数据
      async getsearchResult() {
        const {
          data
        } = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: this.key
        })
        if (data.meta.status !== 200) return uni.$showMsg()
        this.searchResult = data.message;
        this.saveSearchRecord()
      },
      // 保存搜索记录
      saveSearchRecord() {
        if (this.historyResult.indexOf(this.key) === -1) {
          this.historyResult.splice(0,0,this.key);
        } 
        let index = this.historyResult.findIndex(val => {
          return val == this.key
        })
        console.log(this.historyResult);
        this.historyResult.splice(index, 1)
        this.historyResult.splice(0,0,this.key);
        console.log(this.historyResult);
       uni.setStorageSync("searchHistory",JSON.stringify(this.historyResult));
      },
      // 根据联系建议跳转到详情页
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
        })
      },
      // 清除搜索历史
      clearHistory(){
        this.historyResult=[];
        uni.clearStorageSync();
      },
      // 点击搜索历史去商品列表页
      goGoodSList(keyword){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query='+keyword
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .mySearch {
    position: sticky;
    top: 0;
    z-index: 999;

    .advanceList {
      padding: 0 5px;

      .searchAdvance {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #efefef;

        .left {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .historyBox {
      padding: 0 5px;

      .historyTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
      }

      .historyList {
        display: flex;
        flex-wrap: wrap;

        /deep/ .uni-tag {
          display: block;
          margin-right: 5px;
          margin-top: 5px;
        }
      }
    }
  }
</style>
